<ui:composition template="/publico/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="conteudo">
        <h:form>

            <p:fieldset legend="#{msg.geralDadosPesquisa}" toggleable="true" toggleSpeed="1">
                <p:panelGrid columns="2">
                    <p:outputLabel for="itNome" value="#{msg.clienteNome}: "/>
                    <p:inputText id="itNome" style="width:300px" value="#{consultarCliente.clienteFiltro.nome}"/>
                    <p:outputLabel for="itIdade" value="#{msg.clienteIdade}: "/>
                    <p:inputText id="itIdade" style="width:300px" value="#{consultarCliente.clienteFiltro.idade}" />
                    <p:outputLabel for="somSexo" value="#{msg.clienteSexo}: "/>
                    <p:selectOneMenu id="somSexo" style="width:300px" effectSpeed="1" value="#{consultarCliente.clienteFiltro.sexo}">
                        <f:selectItem itemValue="" itemLabel="#{msg.geralSelecione}"/>
                        <f:selectItem itemValue="m" itemLabel="#{msg.geralSexoMasculino}"/>
                        <f:selectItem itemValue="f" itemLabel="#{msg.geralSexoFeminino}"/>
                    </p:selectOneMenu>
                    <p:outputLabel for="itDataNascimento" value="#{msg.clienteDataNascimento}: "/>
                    <p:inputMask id="itDataNascimento" mask="#{msg.geralMascaraData}" style="width:300px" value="#{consultarCliente.clienteFiltro.dataNascimento}">
                        <f:convertDateTime type="date" dateStyle="medium" timeZone="GMT-3" locale="pt_BR"/>
                    </p:inputMask>
                </p:panelGrid>
                <br/>
                <p:spacer height="10"/>
                <p:commandButton value="#{msg.geralPesquisar}"
                                 action="#{consultarCliente.pesquisar}"
                                 icon="ui-icon-zoomin"
                                 ajax="false"/>
                <p:spacer height="10"/>
                <p:commandButton value="#{msg.geralLimpar}"
                                 action="#{consultarCliente.limparFiltros}"
                                 icon="ui-icon-refresh"
                                 ajax="false"/>
                <p:spacer height="10"/>
                <p:commandButton value="#{msg.geralCadastrar}"
                                 action="#{manterCliente.createSetup}"
                                 icon="ui-icon-plus"
                                 ajax="false"/>
            </p:fieldset>

            <p:spacer height="5"/>
                        
            <p:fieldset legend="#{msg.clientes}" toggleable="true" toggleSpeed="1"
                        rendered="#{not empty consultarCliente.dataModel}">
                <p:dataTable id="dtClientes"
                             value="#{consultarCliente.dataModel}"
                             var="cliente"
                             emptyMessage="#{msg.geralNenhumRegistroEncontrado}"
                             paginator="true"
                             rows="5"
                             lazy="true"
                             paginatorPosition="bottom"
                             rowsPerPageTemplate="5, 10, 15, 20">
                    <p:column headerText="#{msg.clienteNome}" style="width: 35%" sortBy="#{cliente.nome}">
                        #{cliente.nome}
                    </p:column>
                    <p:column headerText="#{msg.clienteTelefones}" style="width:20%">
                        <ui:repeat value="#{cliente.telefones}" var="tel">
                            #{tel.ddd} #{tel.numero}<br/>
                        </ui:repeat>
                    </p:column>
                    <p:column headerText="#{msg.clienteIdade}" style="width: 10%; text-align: center" sortBy="#{cliente.idade}">
                        #{cliente.idade}
                    </p:column>
                    <p:column headerText="#{msg.clienteSexo}" style="width: 10%; text-align: center" sortBy="#{cliente.sexo}">
                        <h:outputText value="#{msg.geralSexoMasculino}" rendered="#{cliente.sexo == 'm'}"/>
                        <h:outputText value="#{msg.geralSexoFeminino}" rendered="#{cliente.sexo == 'f'}"/>
                    </p:column>
                    <p:column headerText="#{msg.clienteDataNascimento}" style="width: 10%; text-align: center" sortBy="#{cliente.dataNascimento}">
                        <h:outputText value="#{cliente.dataNascimento}">
                            <f:convertDateTime pattern="#{msg.geralFormatoData}"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="#{msg.geralOpcoes}" style="width: 15%; text-align: center" >
                        <p:commandButton title="#{msg.geralDetalhar}" icon="ui-icon-contact" action="#{manterCliente.detalhar(cliente.id)}" ajax="none"/>
                        <p:commandButton title="#{msg.geralEditar}" icon="ui-icon-clipboard" action="#{manterCliente.editSetup(cliente.id)}" ajax="none"/>
                        <p:commandButton title="#{msg.geralExcluir}" icon="ui-icon-minus" action="#{consultarCliente.removerCliente(cliente)}" ajax="none"/>
                    </p:column>
                </p:dataTable>
            </p:fieldset>

        </h:form>
    </ui:define>
    
</ui:composition>